<template>
  <div class="content">
    <div id="container"></div>

    <!--  这里是 头部 -->
    <div class="head">
      <p class="headl">数据展示大屏</p>
      <h1>智能化管理平台</h1>
      <div class="boxtime">
        <!-- <div class="showTime2">时间: 2021.04.25</div> -->
        <div class="showTime">时间: 2021.04.25</div>
      </div>
    </div>
    <!--  这里是左边 -->
    <div class="leftBox">
      <!-- <div class="boxleft1">
        <div class="tou" style="color: #fff">到访客户统计分析</div>
        <optionS style="width: 100%; height: 100%"></optionS>
        <div class="panel-footer"></div>
      </div> -->
      <div class="boxleft1">
        <div class="tou" style="color: #fff">设备统计分析</div>
        <optionS3 style="width: 100%; height: 100%"></optionS3>

        <div class="panel-footer"></div>
      </div>
      <div class="boxleft1">
        <div class="tou" style="color: #fff">设备连接异常分析</div>
        <optionS2 style="width: 100%; height: 100%"></optionS2>

        <div class="panel-footer"></div>
      </div>
      <div class="boxleft1 left3" style="width: 100%; height: 45%">
        <!-- <div class="tou" style="color: #fff">工位数据分析</div> -->
        <!-- <optionS4 style="width: 100%; height: 100%"></optionS4> -->
        <dv-scroll-board
        :config="configleft"
        style="width: 100%; height: 100%; opacity: 0.5"
        />

        <div class="panel-footer"></div>
      </div>
    </div>

    <!--  这里是右边 -->
    <div class="rightBox">
      <div class="boxright1">
        <h3 style="color: #fff; text-align: left; margin: 10px">
          温度/湿度/空气质量
        </h3>
        <dv-scroll-board
          :config="config3"
          style="width: 100%; height: 92%; opacity: 0.5"
          ref="scrollBoard"
        />
        <!-- <div id="myChart5" style="width: 100%; height: 100%"></div> -->
        <!-- <div class="panel-footer"></div>    下角标 -->
      </div>
      <!-- <div class="boxright1">
        <h2>我是湿度/空气质量</h2>
        <div id="myChart6" style="width: 100%; height: 100%"></div>
        <div class="panel-footer"></div>
      </div> -->

      <div class="boxright2" style="height: 34%">
   
        <!-- 这里不能用v-if   用了 都没这个 dom   下面怎么拿到  dom? 在 渲染图表 ?????   -->

        <!-- <div
          id="myChart7"
          style="width: 100%; height: 100%"
          v-show="false"
        ></div> -->
      
        <!-- <img src="../images/aj.jpg" style="width: 100%;" alt="" /> -->


        <div id="dialog" v-if="show">
           <div id="close" >
              <div>视频监控[{{cameraName}}]</div>
              <img @click="close" src="/close.png" style="cursor:pointer" width="100%" height="100%" alt="" srcset="">
           </div>
          <vuePlayer></vuePlayer>
        </div>


        <div class="panel-footer"></div>

      </div>
    </div>

    <!--  这里是中间 -->
    <div class="centerBox">
      <!-- <div class="biaoge"> -->

      <dv-scroll-board
        :config="config"
        style="width: 100%; height: 100%; opacity: 0.5"
        ref="menjinRef"
      />
      <!-- </div> -->
    </div>

         <!-- <div id="dialog" v-if="show">
           <div id="close" >
              <div>视频监控[{{cameraName}}]</div>
              <img @click="close" src="/close.png" style="cursor:pointer" width="20" height="20" alt="" srcset="">
           </div>
          <vuePlayer></vuePlayer>
        </div> -->

    <!-- <div v-show="show"  id="dialog">
      <div id="close" @click="show=false">x</div>
    </div> -->
  </div>
</template>

<script>
import { shishi, menjin, paiming } from "../api/demo.js";

//  echarts 图表   封装子组件  导入
import optionS from "./echarts/options.vue";
import optionS2 from "./echarts/options2.vue";
import optionS3 from "./echarts/options3.vue";
import optionS4 from "./echarts/options4.vue";
//  导入子组件
import vuePlayer from "./video.vue";

// 时间
import "./times.js";
// 导入布局的  js文件
import "./flexible.js";
// import { View } from "./index";

let view;
export default {
  // 注册子组件
  components: {
    // 视频播放
    vuePlayer,
    // echarts 第一个组件
    optionS,
    optionS2,
    optionS3,
    optionS4,
  },
  data() {
    return {
      //  这里是 门禁  的总数据  一直循环追加
      arrdata2: [],
      arr5: [],
      show: false,
      cameraName:'',
      configleft: {
        // air 空气    humidity湿度  temperature 温度
        // header: ["温度", "湿度", "空气"],
        header: ["工位/top10"],
        data: [['111'],['222'],['333'],['444'],['555'],['666'],['777'],['888'],['999'],['101010'],],
        index: true,
        columnWidth: [50],
        align: "center",
        carousel: "single",
        // carousel: "page",
        rowNum: 10,
      },

      config: {
        header: ["列1", "列2", "列3", "列4"],
        data: [
          ["行1列1", "行1列2", "行1列3", "行1列3"],
          ["行2列1", "行2列2", "行2列3", "行1列3"],
          ["行3列1", "行3列2", "行3列3", "行1列3"],
        ],
        index: true,
        columnWidth: [50],
        align: ["center"],
        carousel: "page",
      },
      config2: {
        // air 空气    humidity湿度  temperature 温度
        // header: ["温度", "湿度", "空气"],
        header: ["湿度", "温度", "空气"],
        data: [],
        index: true,
        columnWidth: [50],
        align: ["center"],
        carousel: "single",
        // carousel: "page",
        rowNum: 3,
      },
      //  右边湿度/ 空气的  数据
      config3: {
        header: ["湿度", "温度", "PM2.5"],
        data: [
          ["22.05", "32.06", "52.36"],
          ["23.25", "33.01", "50.57"],
          ["22.05", "32.06", "52.36"],
          ["23.25", "33.01", "50.57"],

          ["22.05", "32.06", "52.36"],
          ["22.05", "32.06", "52.36"],
          ["23.25", "33.01", "50.57"],

          ["22.05", "32.06", "52.36"],
          ["22.05", "32.06", "52.36"],
          ["22.05", "32.06", "52.36"],
          ["23.25", "33.01", "50.57"],

          ["22.05", "32.06", "52.36"],
          ["22.05", "32.06", "52.36"],
          ["22.05", "32.06", "52.36"],
          ["23.25", "33.01", "50.57"],

          ["22.05", "32.06", "52.36"],
          ["22.05", "32.06", "52.36"],
          ["23.25", "33.01", "50.57"],

          ["22.05", "32.06", "52.36"],
        ],
        carousel: "single", // 一行一行滚动
        index: true, // 展示索引
      },
    };
  },
  mounted() {
    const { View } = require("./index");
    view = new View("#container", this);
    // 实时温度/湿度/空气质量分析
    this.shishidata();
    // 门禁数据  接口
    this.menjindata();
    //  排名接口
    this.paimingdata();
  },
  methods: {
    // top 10 排名  接口
    async paimingdata() {
      const { data:res } = await paiming()
	  console.log("排名的接口",res)
      if(res.code == 200) {
        // console.log(res.result,'排名请求成功');
        var arr = res.result
        var arr2 = []  // 处理后的数组数据
        arr.map( (e,i) => {
         return arr2[i] = [ e.work_name]
        })
        // console.log(arr2,'arr2-----');
        this.configleft = {
            header: ["工位  /  TOP-10"],
            data: arr2,
            index: true,
            columnWidth: [50],
            align: 'center',
            carousel: "single",
            rowNum: 10,
          };
      }
    },
    close() {
      this.show = false;
    },

    shishidata() {
      var that = this;
      var t = null;
      t = setTimeout(time,2000)
      async function time() {
        const { data: res } = await shishi();
        if (res.code == 200) {
          var arr = res.result;
          var arr2 = Object.values(arr); //对象转化为数组
          // console.log(arr, "实时空气温度  数据=====================");
          //var arr5 = new Array();
          if (that.arr5.length < 10) {
            that.arr5.push(arr2);
          } else {
            that.arr5.shift();
            that.arr5.push(arr2);
          }
          //  一条一条的追加数据
          that.$refs["scrollBoard"].updateRows(that.arr5);
          that.config2 = {
            header: ["温度", "湿度", "空气"],
            data: that.arr5,
            index: true,
            columnWidth: [50],
            align: ["center"],
            carousel: "single",
            rowNum: 7,
          };
          // console.log(that.arr5.length, "长度");
          // console.log(that.arr5, "555");
        }
        t = setTimeout(time,2000)
      }
    },

    menjindata() {
      var that = this;
      var t = null;
      t = setTimeout(time,2000);
      async function time(){
        const { data: res } = await menjin();
        if (res.code == 200) {
          var arr = res.result;
          // console.log(res, "这里是门禁999999");
          var arr = res.result;
          var obj2 = arr[0];
          //  得到 滚动条头部 数组的属性
          var keys = Object.keys(obj2);
          // console.log(keys, "对象的属性数组"); // year 年   location 位置    history历史   day 天   位置  历史 年  日

          var arrs = [];
          // var arrdata2 = [];  // 总的数组条数  在这里声明 总数组  第二次请求走到这里会被清空
          arr.forEach((obj, i) => {
            var arrr = [];
            arrr.push(obj.location);
            arrr.push(obj.history);
            arrr.push(obj.year);
            arrr.push(obj.day);
            arrs[i] = arrr;
          });
          // console.log(arrs,'99999999');
          //  这里追加的数据  只追加了一次  为什么都没有成功
          // that.arrdata2.push(...arrs); // 这才是正确的写法

          // console.log(that.arrdata2, "追加的数据9988");
          // 这个是 处理后的数组
          // console.log(arrs, "十二条数据的数组");

          //  12条 12条 的追加数据
          // that.$refs["menjinRef"].updateRows(that.arrdata2,7);   // 这样更新数据

          //  这里的配置是  config
          that.config = {
            // header: keys,
            header: ["所在位置", "历史累计", "本年累计", "本日累计"],
            // data: [], // 这里用的数据就是 vue  实例上的
            data: arrs, // 这里用的数据就是 vue  实例上的
            index: true,
            columnWidth: [50],
            align: "center",
            // carousel: "single",
            carousel: "page",
            rowNum: 7,
          };
        }
        t = setTimeout(time, 8000)
      }  
    },
  },
};
</script>

<style lang="scss" scoped>

// /deep/ .ceil {
//   text-align: center;
// }

.tou {
  // box-sizing:border-box;
  margin-top: 10px;
  font-size: 0.3rem;
  text-align: left;
  line-height: 20px;
  padding-left: 15px;
  background-color: rgb(0, 144, 233);
  opacity: 0.6;
}
.head {
  position: absolute;
  top: 0;
  width: 100%;
  height: 0.75rem;
  line-height: 0.75rem;
  opacity: 0.3;
  // background-color: pink;
  background: url("../images/head_bg.png");
  p {
    position: absolute;
    top: 0;
    left: 50px;
    color: #fff;
    font-size: 0.29rem;
  }
  h1 {
    text-align: center;
    font-size: 0.6rem;
    color: #fff;
  }
  .showTime {
    position: absolute;
    top: 0;
    right: 2rem;
    color: honeydew;
    font-size: 0.25rem;
    height: 50%;
    line-height: 0.4rem;
  }
}

.centerBox {
  position: absolute;
  top: 54%;
  left: 50%;
  transform: translate(-50%, 50%);
  width: 50%;
  height: 30%;
  //   line-height: 30%;
  // background-color: pink;
  //   border: 1px solid red;
  text-align: center;
  margin: 0 auto;
  box-shadow: border-box;
  //   padding: 20px;
  //   dv-scroll-board {
  //       width: 80%;
  //       height: 80%;
  //   }
  // padding-left: 100px;
  //   .boxXia {
  //     width: 80%;
  //     height: 230px;
  //     background-color: yellow;
  //     text-align: center;
  //   }

  //   .biaoge {
  //     width: 150%;
  //     height: 250px;
  //     background-color: pink;
  //     margin-top: 50px;

  //     table {
  //       width: 100%;
  //       text-align: center;
  //     }
  //     width: 35.375rem;
  //     .eee {
  //       background-color: #133977;
  //     }
  //     .qqq {
  //       color: #01f3fc;
  //       font-size: 0.2875rem;
  //     }
  //     // text-align: center;
  //     // margin: auto;
  //     // background-color: #15428c;
  //     position: absolute;
  //     top: 50%;
  //     left: 50%;
  //     transform: translate(-50%, -45%);
  //     color: #fff;
  //     font-size: 0.25rem;
  //     td {
  //       width: 40px;
  //       padding: 10px;
  //       text-align: center;
  //       // border: 1px solid pink;
  //     }
  //   }
}

//  左边最大的盒子
.leftBox {
  position: absolute;
  top: 1rem;
  left: 0.125rem;
  width: 23%;
  height: 90%;
  box-sizing: border-box;
  // background-color: pink;
  //   border: 1px solid red;
  text-align: center;
  padding: 10px;
  padding-top: 0;
  //   overflow: hidden;
  &:nth-child(3) {
    // height: 48%;
    // background-color: pink;
  }
  .boxleft1 {
    position: relative;
    width: 100%;
    height: 24%;
    margin: 0 0 10px 0;
    // background-color: pink;
    border: 1px solid rgba(255, 255, 255, 0.17);
    &::before {
      position: absolute;
      top: 0;
      left: 0;
      content: "";
      // color: #fff;
      width: 15px;
      height: 15px;
      border-left: 2px solid #02a6b5;
      border-top: 2px solid #02a6b5;
    }
    &::after {
      position: absolute;
      top: 0;
      right: 0;
      content: "";
      // color: #fff;
      width: 15px;
      height: 15px;
      border-right: 2px solid #02a6b5;
      border-top: 2px solid #02a6b5;
    }
    // 这个盒子定位在底部 没有高度
    .panel-footer {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      &::before {
        position: absolute;
        bottom: 0;
        left: 0;
        content: "";
        // color: #fff;
        width: 15px;
        height: 15px;
        border-left: 2px solid #02a6b5;
        border-bottom: 2px solid #02a6b5;
      }
      &::after {
        position: absolute;
        bottom: 0;
        right: 0;
        content: "";
        // color: #fff;
        width: 15px;
        height: 15px;
        border-right: 2px solid #02a6b5;
        border-bottom: 2px solid #02a6b5;
      }
    }
  }
}
.rightBox {
  position: absolute;
  top: 1rem;
  right: 0.125rem;
  width: 23%;
  height: 78%;
  // background-color: pink;
  //   border: 1px solid red;
  text-align: center;
  padding: 10px;
  padding-top: 0;
  .boxright1 {
    position: relative;
    width: 100%;
    height: 70%;
    margin: 0 0 10px 0;
    // background-color: pink;
    // border: 1px solid green;
    border: 1px solid rgba(255, 255, 255, 0.17);

    &::before {
      position: absolute;
      top: 0;
      left: 0;
      content: "";
      // color: #fff;
      width: 15px;
      height: 15px;
      border-left: 2px solid #02a6b5;
      border-top: 2px solid #02a6b5;
    }
    &::after {
      position: absolute;
      top: 0;
      right: 0;
      content: "";
      // color: #fff;
      width: 15px;
      height: 15px;
      border-right: 2px solid #02a6b5;
      border-top: 2px solid #02a6b5;
    }
    // 这个盒子定位在底部 没有高度
    .panel-footer {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      &::before {
        position: absolute;
        bottom: 0;
        left: 0;
        content: "";
        // color: #fff;
        width: 15px;
        height: 15px;
        border-left: 2px solid #02a6b5;
        border-bottom: 2px solid #02a6b5;
      }
      &::after {
        position: absolute;
        bottom: 0;
        right: 0;
        content: "";
        // color: #fff;
        width: 15px;
        height: 15px;
        border-right: 2px solid #02a6b5;
        border-bottom: 2px solid #02a6b5;
      }
    }
  }
}

// 下面样式 是模板样式  不用动 ===============================
.home {
  width: 100vw;
  height: 100vh;
  // background-color: red;
}

#dialog {
  padding-top: 50px;
  width: 100%;
  height: 200px;
  position: relative;
  left: 0;
  top:0;
  right:0;
  bottom: 0;
  margin: auto;
}
#close {
  img {
    width: 35px;
  }
  width: 100%;
  height: 35px;
  position: absolute;
  top: 15px;
  // left: 10px;
  padding: 5px;
  box-sizing: border-box;
  font-size: 14px;
  background: steelblue;
  color:white;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
// #panel {
//   background: rgba(0, 0, 0, 0.5);
//   color: white;
//   font-size: 12px;
//   width: 300px;
//   height: 200px;
//   z-index: 10000;
//   position: absolute;
//   left: 0;
//   top: 0;
//   right: 0;
//   bottom: 0;
//   margin: auto;
//   margin-right: 10%;
//   padding: 10px;
// }
// #close {
//   position: absolute;
//   right: -5px;
//   top: -15px;
//   color: white;
//   z-index: 10000;
//   font-size: 20px;
//   font-weight: bold;
//   cursor: pointer;
// }
* {
  margin: 0;
  padding: 0;
}

// ========================================== 下面是他的样式 不用管

// ul{
//   background: white;
// }
// li{
//   list-style: none;
//   font-size: 12px;
//   padding: 5px;
//   cursor: pointer;
//   /* color: white; */
// }
// li:hover{
//   background: black;
//   color: white;
// }
// #container {
//   width: 100vw;
//   height: 100vh;
//   overflow: hidden;
// }
// #search{
//   position: fixed;
//   right: 100px;
//   top: 10px;
//   z-index: 10000;
// }

// ======================================================================
// #close {
//   position: absolute;
//   right: 10px;
//   top: -5px;
//   font-size: 20px;
//   cursor: pointer;
// }
// #dialog {
//   width: 60vw;
//   height: 80vh;
//   background: pink;
//   position: fixed;
//   left: 0;
//   top: 0;
//   right: 0;
//   bottom: 0;
//   z-index: 10000;
//   margin: auto;
// }
ul {
  background: white;
}
li {
  list-style: none;
  font-size: 12px;
  padding: 5px;
  cursor: pointer;
  /* color: white; */
}
li:hover {
  background: black;
  color: white;
}
#container {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}
#search {
  position: fixed;
  right: 100px;
  top: 10px;
  z-index: 10000;
}
</style>